<template>
    <rx-dialog @handOk="handleSubmit" @cancel="cancel">
        <rx-layout>
            <div slot="center">
                <a-form-model ref="form" :model="mdl" :rules="rules" :layout="'vertical'" >
                    <a-row>
                        <a-col :span="12">
                            <a-form-model-item :label="i18n('form.name','名称')" prop="name">
<!--                                <a-input style="width: 90%" :placeholder="i18n('form.name','请输入名称','input')" v-model="mdl.name"/>-->
                                <rx-input-i18n v-model="mdl.name"></rx-input-i18n>
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-model-item :label="i18n('form.type','脚本类型')" prop="type">
                                <a-select style="width: 90%" :placeholder="i18n('form.type','请选择脚本类型','select')" v-model="mdl.type"
                                          :options="typeList"></a-select>
                            </a-form-model-item>
                        </a-col>
                    </a-row>
                    <a-row>
                        <a-col :span="12">
                            <a-form-model-item :label="i18n('form.useTo','用途')" prop="useTo" >
                                <a-select style="width: 90%" :placeholder="i18n('form.useTo','请选择用途','select')" v-model="mdl.useTo"
                                          :options="useToList" @change="getType"></a-select>
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-model-item :label="i18n('form.category','分类')" prop="category">
                                <a-auto-complete
                                    v-model="mdl.category"
                                    :data-source="dataSource"
                                    style="width: 90%"
                                    :placeholder="i18n('form.category','请输入或选择分类','select')"
                                    @search="onSearch"
                                />
                            </a-form-model-item>
                        </a-col>
                    </a-row>
                    <a-form-model-item :label="i18n('form.content','脚本内容')" prop="content">
                        <rx-monaco-editor
                            ref="bodyScript"
                            v-model="mdl.content"
                            language="javascript"
                            style="height: 320px ">
                            <template v-slot:monacoeditor>
                                <a-button icon="edit" @click="showScriptDialog" v-show="mdl.type==1">
                                    {{i18n('list.quickScript','快速脚本')}}
                                </a-button>
                            </template>
                        </rx-monaco-editor>
                    </a-form-model-item>

                </a-form-model>


            </div>
        </rx-layout>
    </rx-dialog>
</template>
<script>
import FormCommonScriptApi from '@/api/form/core/formCommonScript'
import {RxDialog, BaseFormModel,Dialog,RxMonacoEditor,RxInputI18n} from "@lowcode/jpaas-common-lib";


export default {
    name: 'FormCommonScriptEdit',
    mixins: [BaseFormModel],
    components: {
        RxDialog,
        RxMonacoEditor,
        RxInputI18n
    },
    data() {
        return {
            /**
             * 子表列表，以及表格属性
             */
            subTable: {},
            mdl:{},
            rules: {
                useTo: [{required: true, message: this.i18n("form.useTo","请选择用途","select"), trigger: 'change'}],
                category: [{required: true, message: this.i18n("form.category","请输入分类","select"), trigger: 'change'}],
                name: [{required: true, message: this.i18n("form.name","请输入名称","input"), trigger: 'change'}],
                content: [{required: true, message: this.i18n("form.content","请输入脚本内容","input"), trigger: 'change'}],
                type: [{required: true, message: this.i18n("form.type","请选择脚本类型","input"), trigger: 'change'}],
                memo: [{required: false, message: this.i18n("form.memo","请输入备注","input"), trigger: 'change'}],
            },
            useToList:[
                {label: this.i18n("category.common","通用函数"), value: 'common'},
                {label: this.i18n("category.pcJs","列表PC端JS函数"), value: 'list-pcJs'},
                {label: this.i18n("category.mobileJs","列表移动端JS函数"), value: 'list-mobileJs'},
                {label: this.i18n("category.bolistBtn","列表功能按钮"), value: 'list-bolistBtn'},
                {label: this.i18n("category.designJs","表单设计JS脚本"), value: 'form-designJs'},
                {label: this.i18n("category.customPortal","门户组件脚本"), value: 'portal-customPortal'},
                {label: this.i18n("category.customPage","自定义栏目脚本"), value: 'portal-customPage'},
                {label: this.i18n("category.nodeConfig","流程节点脚本"), value: 'bpm-nodeConfig'},
                {label: this.i18n("category.formSolution","表单方案脚本"), value: 'formSolution'},
                {label: this.i18n("category.formSolutionButton","表单方案按钮脚本"), value: 'formSolution-button'},
                {label: this.i18n("category.formBoListExcel","列表Excel脚本"), value: 'formBoListExcel'},
            ],
            typeList:[
                {label: this.i18n("form.frontScript","前端脚本"), value: 0},
                {label: this.i18n("form.backScript","后端脚本"), value: 1},
                {label: this.i18n("form.mobileScript","移动端脚本"), value: 2},
            ],
            categorys:[],
            dataSource:[]
        }

    },
    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "commonScript", key);
        },
        getType(val){
            FormCommonScriptApi.getTypeByUse(val).then(res=>{
                if (res.success){
                    this.categorys=res.data
                    this.dataSource=this.categorys;
                }
            })
        },
        get(id) {
            return FormCommonScriptApi.get(id);
        },
        onload_(data){
            if (data && data.useTo){
                FormCommonScriptApi.getTypeByUse(data.useTo).then(res=>{
                    if (res.success){
                        this.categorys=res.data
                        this.dataSource=this.categorys;
                    }
                })
            }
        },
        save() {
            return FormCommonScriptApi.save(this.mdl);
        },
        onSearch(searchText) {
            if (!searchText){
                this.dataSource=this.categorys
                return
            }
            this.dataSource=this.dataSource.filter(item=>item.indexOf(searchText) != -1)
        },
        showScriptDialog(){
            let self=this;
            let config={curVm:this};
            Dialog.openScriptDialog(config,function (script){
                self.$refs.bodyScript.insertContent(script);
            })
        },

    }
}
</script>
<style scoped>
.ant-form-item{
    margin-bottom:2px !important;
}

</style>
